import classNames from "classnames";
import { useState } from "react";
import Icon from "../Icon/icon";
import Transition from "../Transition/transition";

type AlertType = 'primary' | 'danger' | 'warning' | 'success' | 'info';

export interface IProps {
    type: AlertType,
    message: string,
    closable?: boolean,
    onClose?: () => void,
    description?:string,
    showIcon?:boolean,
}

export interface typeRelateIconType {
    [key:string]:string
}

const Alert = ({
    type,
    message,
    closable = false,
    showIcon,
    description,
    onClose
}:IProps) => {
    const [hide,setHide] = useState(true)

    const claessnames = classNames('leo-alert',{
        [`leo-alert-${type}`]: type
    })
    const closeHandler = () => {
        if(onClose) {
            onClose()
        }
        setHide(false)
    }
    const typeRelateIcon:typeRelateIconType = {
        danger: 'circle-xmark',
        warning: 'circle-exclamation',
        success: 'check-circle',
        info: 'circle-info',
        primary: 'circle-info'
    }
    
    return (
        <>
           <Transition
                in={hide}
                animation="zoom-in-top"
                timeout={300}
            >
                <div className={claessnames}>
                    <div className={description ? 'alert_tit_and_text' : 'alert_tit'}>
                        <div className="alert_tit_center">
                            <div>
                            {/* @ts-expect-error 因为 icon识别不了 typeRelateIcon 类型*/}
                                { showIcon && <Icon icon={typeRelateIcon[type]} theme={type} className="alert_icon"></Icon> }
                            </div>
                            <div>{ message }</div>
                        </div>
                        { closable &&  <div className="closable" onClick={closeHandler}><Icon icon="close"></Icon></div> }
                    </div>
                    <div className="description">
                        { description }
                    </div>
                </div>
            </Transition>   
        </>
        
       
    )    
}

export default Alert;